import React from 'react';//核心库
import ReactDOM from 'react-dom';//DOM渲染库
let names = ['zhangsan', 'lisi', 'wangwu'];
//Each child in a list should have a unique "key" prop.
//当你map的时候，是把一个字符串数组映射为了一个li的React元素数组
//在列表中的每一个子元素都应该有一个唯一的key属性
//原因是为了高效的dom diff
let elements = names.map((item, index) => {
  return <li key={item}>{item}</li>;
});
ReactDOM.render(
  <ul>
    {elements}
  </ul>, document.getElementById('root')
);
let elements2 = names.reverse().map((item, index) => {
  return <li key={item}>{item}</li>;
});
ReactDOM.render(
  <ul>
    {elements2}
  </ul>, document.getElementById('root')
);
/**
 * <ul>
 *   <li>张三</li>
 *   <li>李四</li>
 *   <li>王五</li>
 * </ul>
 * <div>
 *   <p>
 *   <span>
 *   <h1>
 * </div>
 */